﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input
              v-model="listQuery.goods_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('goods.name_1')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="listQuery.status"
              clearable
              style="width: 160px; height:32px;"
              :placeholder="$t('public.status')"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="listQuery.supplier_name"
              style="width: 160px; height:32px;"
              class="filter-item"
              :placeholder="$t('supplier.name')"
              @keyup.enter.native="handleFilter"
            ></el-input>
          </el-form-item>
          <div class="search-button" @click="handleFilter">
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div class="search-button" @click="handleRefresh">
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
          <div class="search-button" @click="searchItem">
            <img
              v-show="showSearchItem === true"
              src="@/assets/images/bg_more@2x.png"
            />
            <img
              v-show="showSearchItem === false"
              src="@/assets/images/bg_sx@2x.png"
            />
          </div>
        </el-form>
        <div class="filter-right">
          <div class="add-button" @click="handleCreate">
            <img src="@/assets/images/icon_add@2x.png" />
            <span>新建</span>
          </div>
        </div>
      </div>
      <div v-show="showSearchItem" class="filter-container">
        <el-form @submit.native.prevent>
          <el-form-item>
            <el-date-picker
              v-model="listQuery.send_time"
              style="width: 160px; height:32px;"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="送餐时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255,255,255,0.2)"
          border
          fit
          highlight-current-row
          style="width: 100%min-height:1000px"
        >
          <el-table-column
            fixed="left"
            align="center"
            :label="$t('table.id')"
            width="65"
          >
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.no')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.order_no }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.status')"
          >
            <template slot-scope="scope">
              <span>{{ purchaseStatusEs(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.time')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.sendTime')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.send_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('order.purchaser')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('supplier.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.supplier_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('meal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.number')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.sum_number }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('table.actions')"
            class-name="operat-button"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="read-img" @click="handleRead(scope.row)">
                <img src="@/assets/images/read@2x.png" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogChartFormVisible"
      >
        <div class="popup-form" id="print" ref="printContent">
          <div class="header-form">
            <div class="from-item">
              <el-table :data="temp.goods_list">
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('terminal.name')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.equipment_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('public.location')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.address }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('meal.name')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.goods_name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('order.bookNumber')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.reserve_number }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('order.sitesNumber')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.estimate_number }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  show-overflow-tooltip
                  :label="$t('order.sumNumber')"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.sum_number }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="footer-banner"></div>
        <div slot="footer" class="dialog-footer between-space">
          <div>
            <el-button
              v-show="dialogStatus == 'read'"
              type="primary"
              @click="printData"
              >{{ $t("table.print") }}</el-button
            >
          </div>
          <div>
            <el-button @click="dialogChartFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button type="primary" @click="dialogChartFormVisible = false">{{
              $t("table.confirm")
            }}</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 新建 -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible">
        <div class="popup-form">
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="base"
            label-position="right"
            label-width="35%"
            size="small"
          >
            <div class="pops">
              <div class="pops-item">
                <div class="pops-left">
                  <el-form-item :label="$t('meal.date') + ' :'">
                    <el-input v-model="base.date" :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="$t('supplier.name') + ' :'"
                    prop="supplier_id"
                  >
                    <el-select
                      v-model="base.supplier_id"
                      placeholder="请选择供应商"
                      @change="changeSupplier()"
                    >
                      <el-option
                        v-for="item in supplierOption"
                        :key="item.supplier_id"
                        :label="item.supplier_name"
                        :value="item.supplier_id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="pops-right">
                  <el-form-item
                    :label="$t('meal.name') + ' :'"
                    prop="goods_name"
                  >
                    <el-input v-model="base.goods_name"></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="$t('public.price') + ' :'"
                    prop="cost_price"
                  >
                    <el-input-number
                      class="left-number"
                      v-model="base.cost_price"
                      :controls="false"
                    ></el-input-number>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <div>
            <el-button @click="dialogVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button type="primary" @click="createData()">{{
              $t("table.confirm")
            }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth";
import html2canvas from "html2canvas";
import printJS from "print-js";
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      statusOptions: [
        {
          value: 1,
          label: "待送餐"
        },
        {
          value: 2,
          label: "已完成"
        },
        {
          value: 3,
          label: "待送餐"
        },
        {
          value: 4,
          label: "已完成"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        status: undefined,
        goods_name: "",
        supplier_name: "",
        send_time: ""
      },
      checkedRow: "",
      temp: {
        id: undefined,
        remark: "",
        check_remark: "",
        goods_list: []
      },
      base: {
        date: "",
        goods_name: "",
        cost_price: undefined,
        remark: "",
        list: []
      },
      rules: {
        price: [{ required: true, message: "请填写商品重量", trigger: "blur" }]
      },
      dialogVisible: false,
      dialogChartFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      supplierOption: [],
      createDisabled: true,
      updateDisabled: true,
      pageSize: 20
    };
  },
  created() {
    const token = getToken();
    if (
      token &&
      !this.$store.state.socket.loginTransition &&
      !this.$store.state.socket.loginAccount
    ) {
      this.tokenLogin(token);
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        status: undefined,
        goods_name: "",
        supplier_name: "",
        send_time: ""
      };
      this.getList();
    },
    searchItem() {
      if (this.showSearchItem === true) {
        this.showSearchItem = false;
      } else {
        this.showSearchItem = true;
      }
    },
    // 获取终端列表
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        status: this.listQuery.status ? this.listQuery.status : "",
        goods_name: this.listQuery.goods_name ? this.listQuery.goods_name : "",
        supplier_name: this.listQuery.supplier_name
          ? this.listQuery.supplier_name
          : "",
        send_time: this.listQuery.send_time ? this.listQuery.send_time : ""
      };
      const path = {
        app: "buy",
        api: "api_buy_index_getList",
        version: "1.0",
        type: "1,2", // id
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 打开查看弹窗
    handleRead(row) {
      this.temp = Object.assign({}, row); // copy obj
      const path = {
        app: "buy",
        api: "api_buy_index_getListDetails",
        version: "1.0",
        type: "1,2",
        data: {
          order_no: row.order_no
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleReview() {
      this.dialogStatus = "review";
    },
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogVisible = true;
      this.resetBase();
      this.getSupplier();
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        remark: "",
        check_remark: ""
      };
    },
    resetBase() {
      this.base = {
        date: this.timestampToTime(new Date().getTime(), "{y}-{m}-{d}"),
        goods_name: "",
        cost_price: undefined,
        remark: "",
        list: []
      };
    },
    printData() {
      html2canvas(this.$refs.printContent, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then(canvas => {
        // let url = canvas.toDataURL('image/jpeg', 1.0)
        const url = canvas.toDataURL();
        // this.img = url;
        printJS({
          printable: url,
          type: "image",
          documentTitle: "采购申请单"
        });
        // console.log(url);
      });
    },
    // 获取供应商
    getSupplier() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_supplieList",
        version: "1.0",
        type: 2,
        data: {
          type: 1
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 改变供应商
    changeSupplier() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_getListDetails",
        version: "1.0",
        type: 2,
        data: {
          goods_date: this.base.date,
          supplier_id: this.base.supplier_id
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 创建采购单
    createData() {
      const data = this.supplierOption;
      data.forEach(element => {
        if (this.base.supplier_id === element.supplier_id) {
          this.base.supplier_name = element.supplier_name;
        }
      });
      this.base.remark = "";
      this.base.list = [];

      this.$router.push({
        path: "/orders/order-form",
        query: {
          mes: JSON.stringify(this.base)
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            });
          } else if (resj.api === "api_buy_index_getList") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "api_buy_index_getListDetails") {
            console.log("resj.data", resj.data);
            this.temp.goods_list = resj.data;
            this.dialogStatus = "read";
            this.dialogChartFormVisible = true;
          } else if (resj.api === "api_arrange_index_supplieList") {
            this.supplierOption = resj.data;
          } else if (resj.api === "api_arrange_index_getListDetails") {
            const data = resj.data[0];
            this.base.cost_price = data.cost_price;
            this.base.goods_id = data.goods_id;
            this.base.goods_name = data.goods_name;
          }
        }
      }
    }
  }
};
</script>
